<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="status">
              <el-select v-model="searchForm.status" clearable placeholder="请选择是否显示">
                <el-option label="不显示" value="0"></el-option>
                <el-option label="显示" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="is_reply">
              <el-select v-model="searchForm.is_reply" clearable placeholder="请选择是否回复">
                <el-option label="未回复" value="0"></el-option>
                <el-option label="已回复" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="评论类容:">
                  <span>{{ props.row.comment }}</span>
                </el-form-item>
                <el-form-item prop="pics" label="评论图片">
                  <el-image style="width: 50px; height: 50px" :src="props.row.pics" :fit="fit" :preview-src-list="[props.row.pics]">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-form-item>
                <el-form-item v-if="props.row.is_reply == 1" label="回复内容:">
                  <span>{{ props.row.merchant_reply_content }}</span>
                </el-form-item>
                <el-form-item v-if="props.row.is_reply == 1" label="回复时间:">
                  <span>{{ props.row.merchant_reply_time|formatDate }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="70"></el-table-column>
          <el-table-column prop="uid" label="用户ID"></el-table-column>
          <el-table-column prop="oid" label="订单ID"></el-table-column>
          <el-table-column prop="goods_id" label="商品ID"></el-table-column>
          <el-table-column prop="goods_score" label="商品分数"></el-table-column>
          <el-table-column prop="service_score" label="服务分数"></el-table-column>
          <el-table-column prop="add_time" label="评论时间" width="150">
            <template slot-scope="scope">
              {{scope.row.add_time|formatDate}}
            </template>
          </el-table-column>
          <el-table-column prop="is_reply" label="回复">
            <template slot-scope="scope">
              <span v-if="scope.row.is_reply == 0" style="color:#F56C6C">未回复</span>
              <span v-else style="color:#409EFF">已回复</span>
            </template>
          </el-table-column>
          <el-table-column label="是否显示" width="70">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.status == 1 ?'显示': '不显示'" placement="top" :enterable="false">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)">
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="back(scope.row)">回复</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
          </el-pagination>
        </div>
      </el-card>
      <el-dialog title="回复" :visible.sync="backVisible" :before-close="handleClose('backForm')" width="400px">
        <el-form ref="backForm" :model="backForm" label-width="80px" :rules="rules">
          <el-form-item label="回复内容" prop="merchant_reply_content">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="backForm.merchant_reply_content" maxlength="300" show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('backVisible', 'backForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('backVisible','backForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { getGoodsReplyList, changeGoodsReplyStatus, goodsReplyBack } from '@/network/api.js'

export default {
  name: 'goodsreply',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        status: '',
        is_reply: ''
      },
      table: [],
      count: 0,
      backForm: {
        id: 0,
        merchant_reply_content: ''
      },
      backVisible: false,
      rules: {
        merchant_reply_content: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getGoodsReplyList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 回复
    back(row) {
      this.backVisible = true
      this.$nextTick(() => {
        this.backForm.id = row.id
        this.backForm.merchant_reply_content = row.merchant_reply_content
      })
    },
    // 修改状态
    changeStatus(ev) {
      this.$confirm('确定修改显示状态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await changeGoodsReplyStatus({ id: ev.id, status: ev.status })
          } catch (e) {
            ev.status = ev.status === 1 ? 0 : 1
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.status = ev.status === 1 ? 0 : 1
          this.$message.warning('您已取消操作')
        })
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].clearValidate()
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].clearValidate()
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          switch (formName) {
            case 'backForm': // 回复
              try {
                await goodsReplyBack(this.backForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          this.$message.error('请检查表单')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
